<template>
	<div>
		<div class="receiveCardD" v-for="item in list" :key="item.id" :style="notReactTime ? 'background:#ffffff' : ''">
			<div class="receiveCard">
				<div class="circleTop" :style="notReactTime ? 'background:#ffffff' : ''"></div>
				<div class="circleBottom" :style="notReactTime ? 'background:#ffffff' : ''"></div>
				<!-- 无门栏现金券 -->

				<div class="moneydiv" :style="notReactTime ? 'background:#e1e1e1;border-color:#ffffff' : ''" v-if="item.type == 2">
					<div class="money">
						<span class="greenChar" :style="notReactTime ? 'color:#737373' : ''">￥</span>
						<span class="greenMoney" :style="notReactTime ? 'color:#737373' : ''">{{ item.reduce }}</span>
					</div>
					<div class="Kinds">{{ item.activeDeploy }}</div>
				</div>

				<!--打折券  -->

				<div class="moneydiv" :style="notReactTime ? 'background:#e1e1e1;border-color:#ffffff' : ''" v-if="item.type == 3">
					<div class="money">
						<span class="blueMoney" :style="notReactTime ? 'color:#737373' : ''">{{ item.discount }}</span>
						<span class="blueChar" :style="notReactTime ? 'color:#737373' : ''">折</span>
					</div>
					<div class="useKinds">{{ item.activeDeploy | activeDeployFilter }}</div>
				</div>

				<!--满减券  -->

				<div class="moneydiv" :style="notReactTime ? 'background:#e1e1e1;border-color:#ffffff' : ''" v-if="item.type == 1">
					<div class="money">
						<span class="redChar" :style="notReactTime ? 'color:#737373' : ''">￥</span>
						<span class="redMoney" :style="notReactTime ? 'color:#737373' : ''">{{ item.reduce }}</span>
					</div>
					<div class="useKinds">{{ item.activeDeploy | activeDeployFilter }}</div>
				</div>
				<div class="content" :style="notReactTime ? 'background:#e1e1e1' : ''">
					<div class="contentTitle over2">{{ item.couponName }}</div>
					<div class="remainTime">
						有效期:
						<span class="time">{{ item.useBeginDate.split(' ')[0] }}</span>- <span class="time">{{item.useEndDate.split(' ')[0]}}</span>
					</div>
					<div class="notes">
						<div class="rectBox" :style="notReactTime ? 'background:#ececec;color:#737373' : ''" v-if="item.availableDeal.indexOf('service')!=-1">服</div>
						<div class="rectBox" :style="notReactTime ? 'background:#ececec;color:#737373' : ''" v-if="item.availableDeal.indexOf('goods')!=-1">商</div>
						<div class="rectBox" :style="notReactTime ? 'background:#ececec;color:#737373' : ''" v-if="item.availableDeal.indexOf('vipCard')!=-1">卡</div>
					</div>
					
				</div>
				<div class="receiveState" :style="notReactTime ? 'background:#e1e1e1' : ''">
					<div v-if="item.days<=7&&item.days!=null&&item.days!=0" class="recivedImage"><img :src="require('../../assets/images/'+Number(item.days)+'.png')" width="100%" /></div>
					
				</div>
			</div>
			<div class="openDescript">
				<span class="openDescriptTitle"></span>
				<span @click="lookCountDetail(item.id)">
					查看详情
					<div class="openDescriptIcon"><img src="../../assets/images/箭头蓝色@2x.png" width="100%" /></div>
				</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: ['openDescriptTitle', 'notReactTime', 'useStatues', 'list'],
	filters: {
		activeDeployFilter: function(data) {
			return data.split('-')[0] + '可用';
		}
	},
	data() {
		return {
			num: 12
		};
	},
	mounted() {},
	methods: {
		nowGet(childrenData) {
			console.log('在子组件中点击领取');
			this.$emit('nowGet', childrenData);
		},
		lookCountDetail(couponId) {
			let merchantCode = 31000001;
			this.$router.push({
				path: `/storecouponsDetail/?id=${couponId}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.receiveCardD {
	&:first-of-type {
		padding-top: 20px;
	}
	background: #f1f1f1;

	.receiveCard {
		margin: 0 20px;
		display: flex;
		position: relative;

		.circleTop,
		.circleBottom {
			position: absolute;
			left: 178px;
			background-color: #f0f0f0;
			height: 20px;
			width: 40px;
		}

		.circleTop {
			top: 0px;
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
		}

		.circleBottom {
			bottom: 0px;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
		}

		.moneydiv {
			height: 240px;
			width: 190px;
			border-right: 16px dotted #e1e1e1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #ffffff;
			border-radius: 10px 0 0 10px;

			.money {
				vertical-align: middle;
				.greenChar {
					color: #27b77c;
					font-weight: bold;
					font-size: 45px;
				}
				.greenMoney {
					color: #27b77c;
					font-weight: bold;
					font-size: 70px;
				}
				.blueMoney {
					color: blue;
					font-weight: bold;
					font-size: 70px;
				}
				.blueChar {
					color: blue;
					font-weight: bold;
					font-size: 45px;
					position: relative;
					bottom: 5px;
				}
				.redChar {
					color: red;
					font-weight: bold;
					font-size: 45px;
				}
				.redMoney {
					color: red;
					font-weight: bold;
					font-size: 70px;
				}
			}

			.useKinds {
				color: #7d7d7d;
				font-size: 26px;
			}
		}

		.content {
			flex: 1;
			padding-left: 30px;
			height: 240px;
			background: #ffffff;

			.contentTitle {
				margin-top: 40px;
				font-size: 32px;
				color: #272727;
			}

			.remainTime {
				margin: 30px 0;
				font-size: 24px;
				color: #737373;
			}

			.notes {
				display: flex;

				.rectBox {
					width: 40px;
					height: 40px;
					color: #bc8038;
					background-color: #feeaa4;
					border-radius: 5px;
					text-align: center;
					line-height: 40px;
					font-size: 24px;
					margin-right: 24px;
				}
			}
		}
.recivedImage {
				height: 96px;
				width: 96px;
				position: absolute;
				top: 0;
				right: 0;
			}
		.receiveState {
			height: 240px;
			background: #ffffff;
			display: flex;
			align-items: center;
			position: relative;
			border-radius: 0 10px 10px 0;
			// min-width: 170px;
			

			.nowGet {
				padding: 0;
				border: 0;
				line-height: 50px;
				text-align: center;
				height: 50px;
				width: 140px;
				border-radius: 50px;
				font-size: 25px;
				margin-right: 30px;
				color: #675400;
				background-color: yellow;
			}
			.haveNum {
				position: absolute;
				right: 30px;
				bottom: 40px;
				font-size: 34px;
				color: #272727;
			}
		}
	}

	.openDescript {
		height: 80px;
		display: flex;
		align-items: center;
		font-size: 24px;
		color: #4883c0;
		justify-content: space-between;
		.openDescriptTitle {
			margin-left: 50px;
			font-size: 24px;
			color: #737373;
		}
		.openDescriptIcon {
			width: 14px;
			height: 25px;
			margin: 0 50px 0 16px;
			display: inline-block;
		}
	}
}
</style>
